<template>
  <div class="details-dialog">
    <el-dialog v-model="detailsDialog" :before-close="handleClose" :title="props.dialogTitle" fullscreen>
      <el-card shadow="hover">
        <div style="height: 550px">
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2 :columns="columns" :data="tableModule.tableData" :width="width" :height="height" fixed />
            </template>
          </el-auto-resizer>
        </div>
        <el-pagination :current-page="tableModule.currentPage" :page-size="tableModule.pageSize"
          :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="false"
          layout="total, sizes, prev, pager, next, jumper" :total="tableModule.count" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button type="primary" @click="determine()">确定</el-button> -->
          <el-button @click="cancel()">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="tsx" setup>
import * as FormApi from '@/api/knowledge/character'
import { ref } from 'vue'
import { Column } from 'element-plus'
import dayjs from 'dayjs'

const props = defineProps({
  dialogTitle: String
})
const detailsDialog = ref(false)
const operationalData = reactive({})
const tableModule = reactive({
  tableData: [], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})

onMounted(() => {

})
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  tableModule.pageSize = val
  getTableData()
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  tableModule.currentPage = val
  getTableData()
}
const open = async (data: any) => {
  console.log(data)
  detailsDialog.value = true
  Object.assign(operationalData, data)
  getTableData()
}
defineExpose({ open })

const handleClose = (done: () => void) => {
  done()
}
const getTableData = async () => {
  const params = {
    eventLocation: operationalData.place,
    pageNo: tableModule.currentPage,
    pageSize: tableModule.pageSize
  }
  FormApi.getGraphEventPageByPlace(params).then((res) => {
    tableModule.tableData = res.list
    tableModule.count = res.total
  })
}

// 弹窗确定
const determine = () => {
  detailsDialog.value = false
}
// 弹窗取消
const cancel = () => {
  detailsDialog.value = false
}

const columns: Column<object>[] = [
  {
    key: 'agent',
    title: 'agent',
    dataKey: 'agent',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: agent }) => <div>{agent}</div>
  },
  {
    key: 'desc',
    title: 'desc',
    dataKey: 'desc',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: desc }) => <div>{desc}</div>
  },
  {
    key: 'eventLocation',
    title: 'eventLocation',
    dataKey: 'eventLocation',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: eventLocation }) => <div>{eventLocation}</div>
  },
  {
    key: 'eventVerb',
    title: 'eventVerb',
    dataKey: 'eventVerb',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: eventVerb }) => <div>{eventVerb}</div>,
  },
  {
    key: 'graphId',
    title: 'graphId',
    dataKey: 'graphId',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: graphId }) => <div>{graphId}</div>,
  },
  {
    key: 'graphName',
    title: 'graphName',
    dataKey: 'graphName',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: graphName }) => <div>{graphName}</div>,
  },
  {
    key: 'id',
    title: 'id',
    dataKey: 'id',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: id }) => (
      <el-tooltip content={id}>{<span class="table-ellipsis">{id}</span>}</el-tooltip>
    )
  },
  {
    key: 'orgs',
    title: 'orgs',
    dataKey: 'orgs',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: orgs }) => <div>{orgs}</div>,
  },
  {
    key: 'createTime',
    title: '创建时间',
    dataKey: 'createTime',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: createTime }) => (
      <el-tooltip content={dayjs(createTime).format("YYYY/MM/DD")}>
        {<span class="flex items-center">{dayjs(createTime).format("YYYY/MM/DD")}</span>}
      </el-tooltip>
    ),
  },
  {
    key: 'eventDate',
    title: 'eventDate',
    dataKey: 'eventDate',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: eventDate }) => (
      <el-tooltip content={dayjs(eventDate).format("YYYY/MM/DD")}>
        {<span class="flex items-center">{dayjs(eventDate).format("YYYY/MM/DD")}</span>}
      </el-tooltip>
    ),
  }
]
</script>
<style lang='scss' scoped>
.details-dialog {

  // 覆盖默认overflow: auto样式，防止出现无效的滚动条
  ::v-deep(.el-dialog) {
    overflow: hidden !important;
  }

  ::v-deep(.table-ellipsis) {
    word-break: break-all; // 允许在单词内换行
    text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本
    overflow: hidden;
    white-space: nowrap; // 不换行控制单行文本
  }
}
</style>
